<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="formModel">
        <el-form-item class="no-warn-item" label="用户登录名:" prop="username">
          <el-input
            v-model="formModel.username"
            class="filter-item "
            clearable
          />
        </el-form-item>
        <el-form-item class="no-warn-item" label="工厂:" prop="tmBasPlantId">
          <el-select
            v-model="formModel.tmBasPlantId"
            clearable
            filterable
            @clear="clearPlant"
            @change="changePlant"
          >
            <el-option
              v-for="item in plantOptions"
              :key="item.tmBasPlantId"
              :label="item.plantNameC"
              :value="item.tmBasPlantId"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="no-warn-item" label="车间:" prop="tmBasWorkshopId">
          <el-select
            v-model="formModel.tmBasWorkshopId"
            clearable
            filterable
            @clear="clearWorkshop"
            @change="changeWorkshop"
          >
            <el-option
              v-for="item in workshopOptions"
              :key="item.tmBasWorkshopId"
              :label="item.workshopNameC"
              :value="item.tmBasWorkshopId"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="no-warn-item" label="工位:" prop="tmBasUlocId">
          <el-select v-model="formModel.tmBasUlocId" clearable filterable>
            <el-option
              v-for="item in ulocOptions"
              :key="item.tmBasUlocId"
              :label="item.ulocName"
              :value="item.tmBasUlocId"
            />
          </el-select>
        </el-form-item>
        <el-row class="submit-area">
          <el-col :span="24">
            <el-button
              v-if="hasPermission('userUloc_select')"
              type="primary"
              plain
              @click="queryList(false)"
            >查询
            </el-button>
            <el-button v-if="hasPermission('userUloc_add')" type="primary" plain @click="handleAdd">新增
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <hey-table ref="table" :table-data="tableData" :columns="columns" :auto-width="false">
      <template slot="tools">
        <el-table-column
          label="操作"
          width="160"
          fixed="right"
          header-align="center"
          align="center"
        >
          <template slot-scope="{row}">
            <span
              v-if="hasPermission('userUloc_edit')"
              class="hey_tools_btn"
              @click="handleEdit(row)"
            >编辑</span>
            <span
              v-if="hasPermission('userUloc_del')"
              class="hey_tools_btn"
              @click="handleDelete(row)"
            >删除</span>
          </template>
        </el-table-column>
      </template>
    </hey-table>
    <el-dialog
      v-if="dialogVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      title="用户工位配置信息"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <UserUloc-mnt :page-type="operateType" :edit-data="editData" @mntSuc="queryList" />
    </el-dialog>

  </div>
</template>

<script>

export default {
  name: 'UserUlocList',
  components: {
    UserUlocMnt: () => import('./userUloc-mnt')
  },
  props: {},
  data() {
    return {
      plantOptions: [],
      workshopOptions: [],
      ulocOptions: [],
      dialogVisible: false,
      operateType: '',
      editData: {},
      tableData: [],
      // 查询条件
      formModel: {
        username: '',
        tmBasPlantId: '',
        tmBasWorkshopId: '',
        tmBasUlocId: ''
      },
      columns: [
        { title: '用户登录名', key: 'username' },
        { title: '工厂', key: 'plantNameC' },
        { title: '车间', key: 'workshopNameC' },
        { title: '工位', key: 'ulocName' }
      ]
    }
  },
  computed: {},
  mounted() {
    const param = { status: '1' }
    this.getPlantOptions(param)
  },
  methods: {
    queryList() {
      this.$refs.table.query('/userUloc/pageUserUloc', this.formModel, '', false)
    },
    handleAdd() {
      this.operateType = 'add'
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.dialogVisible = true
      this.operateType = 'edit'
      this.editData = row || {}
    },
    handleDelete(row) {
      this.$sure('确认删除？', _ => {
        this.post('/userUloc/deleteUserUloc', {
          userUlocId: row.userUlocId
        }).then(_ => {
          this.$info('删除成功', this.queryList)
        })
      })
    },
    // 点击后获取工厂对应的车间列表
    changePlant(value) {
      if (value !== '') {
        // 清空车间
        this.formModel.tmBasWorkshopId = ''
        // 清空工位和工位列表
        this.formModel.tmBasUlocId = ''
        this.ulocOptions = ''
        // 查询对应车间列表
        const param = { tmBasPlantId: value, status: '1' }
        this.getWorkshopOptions(param)
      }
    },
    // 清空工厂条件
    clearPlant() {
      // 清空所有车间和工位列表
      this.formModel.tmBasWorkshopId = ''
      this.workshopOptions = ''
      this.formModel.tmBasUlocId = ''
      this.ulocOptions = ''
    },
    // 点击后获取车间对应的工位列表
    changeWorkshop(value) {
      if (value !== '') {
        // 清空工位
        this.formModel.tmBasUlocId = ''
        const param = { tmBasWorkshopId: value, status: '1' }
        this.get('/tmBasUloc/listUloc', param).then(res => {
          this.ulocOptions = res
        })
      }
    },
    // 清空车间条件
    clearWorkshop() {
      // 清空工位
      this.formModel.tmBasUlocId = ''
      this.ulocOptions = ''
    },
    // 获取工厂列表
    getPlantOptions(param) {
      this.get('/tmBasPlant/queryTmBasPlantList', param).then(res => {
        this.plantOptions = res
      })
    },
    // 获取车间列表
    getWorkshopOptions(param) {
      this.get('/tmBasWorkshop/listWorkshop', param).then(res => {
        this.workshopOptions = res
      })
    },
    // 获取工位列表
    getUlocOptions(param) {
      this.get('/tmBasUloc/listUloc', param).then(res => {
        this.ulocOptions = res
      })
    }
  }
}
</script>
